<div th:fragment="control_chart_bar">
<script type="text/javascript">
	// 示例数据
	var get_bar_option = function()
	{
		return {
			"tooltip" : {
				"trigger" : "axis",
				"position" : [ 60, 200 ],
				"axisPointer" : {
					"type" : "line",
					"lineStyle" : {
						"color" : "#8e8e8e",
						"width" : 1,
						"type" : "solid"
					}
				}
			},
			"legend" : {
				"x" : "center",
				"itemWidth" : 7,
				"itemHeight" : 10,
				"textStyle" : {
					"color" : "#888",
					"fontSize" : 12
				},
				"data" : []
			},
			"grid" : [ {
				"show" : false,
				"top" : 50,
				"bottom" : 90,
				"left" : 50,
				"right" : 65,
				"containLabel" : false
			} ],
			"color" : [ "#02af6d", "#58abf9", "#d79de3", "#f9be58", "#b5ea7c", "#fa9c7d", "#01bc6f", "#60C0DD", "#D7504B", "#C6E579", "#F4E001", "#26C0C0" ],
			"yAxis" : [ {
				"boundaryGap" : true,
				"name" : "y轴",
				"axisLine" : {
					"show" : false
				},
				"axisTick" : {
					"show" : false
				},
				"splitLine" : {
					"show" : false
				},
				"axisLabel" : {
					"rotate" : -30,
					"interval": 0,
					"formatter": 0,
					"textStyle" : {
						"color" : "#777777",
						"fontSize" : 12
					}
				},
				"data" : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ],
				"axisLabel": {
					 "interval": 0,  
					 "formatter":function(value)  
					 {  
						 var ret = "";//拼接加\n返回的类目项  
						 var maxLength = 5;//每项显示文字个数  
						 var valLength = value.length;//X轴类目项的文字个数  
						 var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
						 if (rowN > 1)//如果类目项的文字大于5,  
						 {  
							var temp = "";//每次截取的字符串  
							var start = 0;//开始截取的位置  
							var end = start + maxLength;//结束截取的位置  
							temp = value.substring(start, end) + "...";
							ret += temp; //凭借最终的字符串  
							return ret;  
						 }  
						 else {  
							return value;  
						 }  
					 }  
				 },
			} ],
			"xAxis" : [ {
				"type" : "value",
				"name" : "x轴",
				"boundaryGap" : false,
				"axisLine" : {
					"show" : true
				},
				"axisTick" : {
					"show" : false
				},
				"splitLine" : {
					"show" : true,
					"lineStyle" : {
						"color" : "#8e8e8e",
						"width" : 1,
						"type" : "solid"
					}
				},
				"axisLabel" : {
					"rotate" : -30,
					"formatter": 0,
					"textStyle" : {
						"color" : "#777777",
						"fontSize" : 12
					}
				}
			} ],
			"series" : [],
			"sql" : ""
		};
	}

	/** 条形图元数据 */
	function metadata_bar(params)
	{
		var series = {
			"name" : "系列一",
			"type" : "bar",
			"stack": 'one',
			"column" : "SUMVALUE",
			"symbol" : "emptyCircle",
			"symbolSize" : 5,
			"lineStyle" : {
				"normal" : {
					"borderColor" : "red",
					"width" : 1
				}
			},
			"data" : [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ],
			"axisLabel": {
				 "interval": 0,  
				 "formatter":function(value)  
				 {
					 return value;
				 }  
			 }
		};
		var legendData = {
			"name" : "系列一",
			"icon" : "emptyCircle"
		};
		var opt = get_bar_option();// 每个视图创建新的option，防止相互污染
		opt.series.push(series);
		opt.legend.data.push(legendData);
		params = $.extend({}, {
			GRID : {},
			X_Y_AXIS : {},
			DATASET : {
				series : series,
				legend : legendData
			},
			OPTION : opt
		}, params);
		return $.extend(new metadata_chart_common(params), this);
	}

	/** 条形图 元数据视图 面板视图 */
	function metadata_view_bar(control)
	{
		return $.extend(new metadata_view_chart_common(control), this);
	}

	/** 条形图 表单视图 */
	function metadata_form_view_bar(control)
	{
		return $.extend(new metadata_form_view_chart_common(control), this);
	}
</script>
</div>